import React, {Component} from 'react';
import {Button, message} from 'antd';
import {ToolRequest} from '../../utils';
import Upload from './index';

//默认的上传地址
const action = 'http://www.mocky.io/v2/5cc8019d300000980a055e76';

/**
 * Demo
 */
export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //已经上传的文件列表
      fileList: [
        {
          uid: '2', //注意：uid必传。
          name: 'yyy.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        }
      ],
      uploadHandles: [], //手动上传事件
      isUploading: false //是否正在手动上传
    };
  }

  render() {
    return (
      <div>
        {this.renderUpload()}
        {this.renderUploadRequest()}
        {this.renderUploadRequest()}
        {this.renderUploadHandle()}
      </div>
    );
  }

  /**
   * 文件列表
   */
  renderUpload() {
    let props = {
      fileType: {types: ['image/jpeg', 'image/png'], msg: '只能上传JPG/JPEG/PNG格式的文件'},
      fileSize: {
        max: {size: 1024 * 500, msg: '文件大小不能超过500KB'},
        min: {size: 1, msg: '文件大小不能小于0B'},
        autoCompress: true
      },
      multiple: true,
      fileNum: 5,
      fileList: this.state.fileList,
      onSuccess: this.onSuccess
    };
    return (
      <div>
        <h3>文件上传</h3>
        <Upload {...props} />
      </div>
    );
  }

  /**
   * 自定义请求
   */
  renderUploadRequest() {
    let props = {
      uploadRequest: this.uploadRequest,
      onSuccess: this.onSuccess
    };
    return (
      <div>
        <h3>自定义请求</h3>
        <Upload {...props} />
      </div>
    );
  }

  /**
   * 手动上传
   */
  renderUploadHandle() {
    let {uploadHandles, isUploading} = this.state;
    let props = {uploadHandles, onSuccess: this.onSuccess};

    return (
      <div>
        <h3>手动上传</h3>
        <Upload {...props} />
        <Button loading={isUploading} onClick={this.clickUpload}>
          手动上传
        </Button>
      </div>
    );
  }

  /**
   * 自定义请求
   * @param param 请求参数，格式：{action,data,headers,file,fileList,onUploadProgress}
   */
  uploadRequest(param = {}) {
    let {action, data, headers, file, fileList, onUploadProgress} = param;
    let dataRequest;
    if (data) {
      dataRequest = {file: file.fileCompress || file.file, ...data};
    } else {
      dataRequest = {file: file.fileCompress || file.file};
    }
    let config = {headers, method: 'POST', dataType: 'FORM', onUploadProgress};
    return ToolRequest.ajax(action, dataRequest, config);
  }

  //手动上传事件
  clickUpload = () => {
    let {uploadHandles} = this.state;
    if (uploadHandles.length === 0) {
      message.success('请先选择文件');
      return;
    }

    this.setState({isUploading: true});
    //上传事件
    let promises = uploadHandles.map((item) => {
      let {file, onSuccess, onError, onUploadProgress} = item;
      let data = {file: file.fileCompress || file.file};
      let config = {headers: {}, method: 'POST', dataType: 'FORM', onUploadProgress};
      return ToolRequest.ajax(action, data, config)
        .then((r) => {
          onSuccess(r);
          let index = uploadHandles.findIndex((e) => e.file === file);
          if (index >= 0) uploadHandles.splice(index, 1);
        })
        .catch((e) => {
          onError(e);
          throw e;
        });
    });
    Promise.all(promises)
      .then((res) => {
        message.success('手动上传成功');
      })
      .catch((e) => console.log(e))
      .finally(() => this.setState({isUploading: false}));
  };

  onSuccess(result, file, fileList) {
    console.log('上传成功', {result, file, fileList});
  }
}
